<template>
  <div style="background: #ffffff">
    <a-list class="home-message">
      <a-list-item>
        <a-card>
          <template slot="title">
            消息通知
          </template>
          <div class="home-message-tab">
            <a-tabs
            @change="changeMsgListType"
            v-model="msgType"
            size="small">
              <a-tab-pane key="1" tab="未读" />
              <a-tab-pane key="2" tab="已读" />
            </a-tabs>
          </div>
          <template v-if="timeList.length > 0">
            <div class="home-message-content">
              <div v-for="item in timeList" :key="item.taskId" style="cursor: pointer"
                   @click="msgItemClick(item)">
                <div class="home-message-createTime">
                  {{ item.createTime }}
                </div>
                <div class="home-message-subject">
                  <p>
                    <span>
                      名称:
                    </span>
                    <span>
                      {{ item.subject }}
                    </span>
                  </p>

                  <p>
                    <span>
                      状态:
                    </span>
                    <span
                        :class="`${item.instStatus.toLowerCase() === 'running' ? 'home-message-action' : item.instStatus.toLowerCase() === 'back' ? 'home-message-end' : 'home-message-text'}`"
                    >
                    <!-- actionOpinion是审批意见,actionType是流程状态 -->
                    <!-- item.actionOpinion || listMap[item.instStatus.toLowerCase()] || item.instStatus.toLowerCase() -->
                      {{
                        listMap[item.actionType.toLowerCase()]
                      }}
                    </span>
                  </p>
                </div>
              </div>
            </div>
          </template>

          <template v-else>
            <div style="text-align: center">
              <img style="width: 100%" :src="require('@/assets/images/home/notMessage.png')" alt="暂无消息">
              <span>
                暂无消息
              </span>
            </div>
          </template>

        </a-card>
      </a-list-item>
    </a-list>
    <a-pagination
        :total="msgRequest.total"
        :page-size="msgRequest.pageSize"
        size="small"
        style="padding: 8px 12px; text-align: right"
        @change="homeMessagePaginationChange"
    />
  </div>
</template>

<script>
import {
  // formTaskHandle,
  getMessage,
  messageAck
} from "@/api/handle/handle";
import { getLocalStorage } from '@/utils/localstore'

export default {
  name: "Message",
  props: {
    returnTimelineItem: {
      type: Function,
      default: (itemObject) => itemObject
    }
  },
  data() {
    return {
      timeList: [],
      style: {
        overflowY: 'scroll'
      },
      timeListPagination: {
        offset: 1,
        limit: 4,
        total: 0
      },
      msgType: "1",
      msgRequest: {
        pageNum: 1,
        pageSize: 4,
        userId: getLocalStorage('userId'),
        total: 0,
        maxPage: 0
      },
      listMap: {
        normal: '普通',
        suspend: '挂起',
        lock: '锁定',
        back: '驳回',
        designate: '指派',
        turn: '转办',
        adddoed: '加办结束',
        agency: '代理',
        running: '运行中',
        start: '开始',
        reject: '驳回',
        agree: '通过'
      }
    }
  },
  created() {
    this.getFormTasHandle();
  },
  async mounted() {
    this.$nextTick(async () => {
      await this.changeSizeMessageHeight();
      window.addEventListener('resize', async () => {
        await this.changeSizeMessageHeight();
      })
    })
  },
  methods: {
    msgItemClick(item) {
      if (this.msgType === "1") {
        messageAck({id: item.id}).then(({success, message}) => {
          if (success) {
            this.returnTimelineItem(item);
          } else {
            this.$message.warning(message);
          }
        })
      } else {
        this.returnTimelineItem(item);
      }
    },
    changeMsgListType(type) {
      this.msgType = type;
      this.getFormTasHandle();
    },
    getFormTasHandle(page = 1) {
      // todo
      this.msgRequest.pageNum = page;
      const requestData = Object.assign(this.msgRequest, {
        isRead: this.msgType * 1 - 1
      })
      getMessage(requestData).then(res => {
        if (res.success) {
          const { list, total } = res.data;
          this.msgRequest.total = total;
          this.msgRequest.maxPage = Math.ceil(total / this.msgRequest.pageSize);
          if (list && list.length) {
            list.forEach(item => {
              item.instStatus = item.actionType;
            })
            this.timeList = list;
          } else {
            //暂无数据
            this.timeList = [];
            this.msgRequest.total = 0;
          }
        } else {
          this.timeList = [];
          this.msgRequest.total = 0;
        }
      })
    },
    homeMessagePaginationChange(page) {
      this.timeListPagination.offset = page;
      this.getFormTasHandle(page);
    },
    async changeSizeMessageHeight() {
      const pageHeaderList = document.querySelectorAll('.home-first-content-col > .ant-page-header').length > 0 ? document.querySelectorAll('.home-first-content-col > .ant-page-header') : document.querySelectorAll('.home-second-content-layout-col');
      let offsetHeight = 0;
      for (let i = 0; i < pageHeaderList.length; i++) {
        offsetHeight += pageHeaderList[i].offsetHeight;
      }
      this.style.height = `${offsetHeight}px`;
      const antCardBody = document.querySelector('.home-message .ant-card-body');
      const antCardHead = document.querySelector('.home-message .ant-card-head');
      antCardBody && antCardBody.setAttribute('style', `overflow-y: scroll; height: ${offsetHeight - antCardHead.offsetHeight - 48 - 16}px`)
    }
  }
}
</script>

<style scoped lang="less">
.home-message {
  width: 310px;
  .ant-list-item {
    padding: 0;
    /deep/ * {
      .ant-card-body {
        padding: 13px;
        padding-top: 0;
        .home-message-createTime {
          color: #909cb4;
          font-size: 14px;
          margin-top: 14px;
        }

        .home-message-subject {
          padding: 10px 17px 9px 13px;
          box-sizing: border-box;
          border-radius: 4px;
          background: #f0faff;
          margin-top: 5px;
          transition: all 0.4s;

          p:first-child {
            margin-bottom: 8px;
          }

          p {
            display: flex;

            > span:first-child {
              flex: 1;
            }

            > span:last-child {
              flex: 4;
            }
          }
        }

        .home-message-subject:hover {
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
        }
      }

      .ant-card-head-title {
        text-align: center;
      }
    }
  }
}

.home-message-action {
  color: #52c41a;
}

.home-message-end {
  color: #f1960f;
}

.home-message-text {
  color: #3296fa;
}

.home-message-tab {
  position: absolute;
  background-color: #fff;
  right: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  /deep/ .ant-tabs-nav {
      width: 85%;
      > div {
        > div {
          width: 50%;
          text-align: center;
        }
      }
    }
}

.home-message-content{
  margin-top: 60px;
}
</style>
